<template>
  <div class="body">
    <div class="top-line"><h2 style="margin-left:5%">需求表</h2></div>
  <div class="form-container" style="border: 5px solid #eee">
    <!-- <el-button
      class="filter-item"
      style="margin-left: 10px;"
      type="primary"
      icon="el-icon-edit"
      @click="handleCreate"
    >添加</el-button>
    <el-dialog :visible.sync="dialogFormVisible"> -->
      <el-form class="form-demand"
        :model="questionForm"
        ref="dataForm"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left:50px;"
        :rules="rules"
      >
        <el-form-item label="需求标题" prop="reqname" style="margin-top:2%">
          <el-input type="textarea" :rows="2" v-model="questionForm.reqname"></el-input>
        </el-form-item>
        <el-form-item label="需求类别" prop="reqtype">
          <el-select
            v-model="questionForm.reqtype"
            class="filter-item"
            placeholder="选择类别"
          >
            <el-option
              v-for="item in tabMapOptions1"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="领域类别" prop="reqfield">
          <el-select
            v-model="questionForm.reqfield"
            class="filter-item"
            placeholder="选择领域"
          >
            <el-option
              v-for="item in tabMapOptions2"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="行业类别" prop="reqindu">
          <el-select
            v-model="questionForm.reqindu"
            class="filter-item"
            placeholder="选择类别"
          >
            <el-option
              v-for="item in tabMapOptions3"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预算" prop="reqcoin">
          <el-input v-model="questionForm.reqcoin"></el-input>
        </el-form-item>
        <el-form-item label="需求背景" prop="reqbg">
          <el-input type="textarea" :rows="3" v-model="questionForm.reqbg"></el-input>
        </el-form-item>
        <el-form-item label="待解问题" prop="reqpb">
          <el-input type="textarea" :rows="3" v-model="questionForm.reqpb"></el-input>
        </el-form-item>
        <el-form-item label="目标要求" prop="reqtarg">
          <el-input type="textarea" :rows="3" v-model="questionForm.reqtarg"></el-input>
        </el-form-item>
        <el-form-item label="归属" prop="reqbelongs">
          <el-radio-group v-model="questionForm.reqbelongs" style="margin-right:55%;">
            <el-radio v-for="(radio, index) in subjectList" :key="index" :label="radio" >{{radio}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属名称" prop="reqown">
          <el-input placeholder="人名或机构名" v-model="questionForm.reqown" />
        </el-form-item>
        <el-form-item label="联系地址" prop="reqaddr">
          <el-input placeholder="精确到具体地址" v-model="questionForm.reqaddr" />
        </el-form-item>
        <el-form-item label="联系人" prop="reqperson">
          <el-input v-model="questionForm.reqperson" />
        </el-form-item>
        <el-form-item label="联系号码" prop="reqcontact">
          <el-input type="number" v-model="questionForm.reqcontact" />
        </el-form-item>
        <el-form-item label="联系邮箱" prop="reqmail">
          <el-input v-model="questionForm.reqmail" />
        </el-form-item>
        
        <el-form-item label="资质附件" prop="fileList">
            <el-upload
                class="upload-demo"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                action=""
                :on-exceed="handleExceed"
                :file-list="fileList"
                :on-change="handleBefore"
                :auto-upload="false">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="toach()">取消</el-button>
        <el-button @click="handleCreate()" type="primary" plain>重置</el-button>
        <el-button type="primary" @click="createData()">确定</el-button>
      </div>
    <!-- </el-dialog> -->
  </div>
  </div>
</template>
<script>
//调用接口
// import { saveSubject } from "@/api/content";
export default {
    name:'Demand',
  data() {
    return {
      questionForm: {
        reqname:"",//需求名字
        reqtype:"",//需求类别
        reqfield:"",//需求领域
        reqindu:"",//行业
        reqcoin:"",//预算
        reqbg: "",//介绍
        reqpb: "",//待解问题
        reqtarg: "",//目标
        reqbelongs: "",//所属
        reqown: "",//所属名称
        reqaddr: "",//地址
        reqperson: "",//联系人
        reqcontact: "",//联系方式
        reqmail: "",//联系邮箱
        fileList:"",//附件
        
      },
      subjectList: ["个人", "机构"],
      
      tabMapOptions1: [
        { label: "专利", key: "专利" },
        { label: "软件著作权", key: "软件著作权" },
        { label: "登记鉴定成果", key: "登记鉴定成果" },
        { label: "科技评价成果", key: "科技评价成果" },
        { label: "其他技术成果", key: "其他技术成果" },
        { label: "农业新品种", key: "农业新品种" },
        { label: "预期成果", key: "预期成果" },
        { label: "复合成果", key: "复合成果"},
      ],
      tabMapOptions2:[
          {label:'新材料',key:"新材料"},
          {label:'新能源与节能',key:"新能源与节能"},
          {label:'农业',key:"农业"},
          {label:'资源与环境',key:"资源与环境"},
          {label:'先进制造与自动化',key:"先进制造与自动化"},
          {label:'高技术服务',key:"高技术服务"},
          {label:'生物与新药',key:"生物与新药"},
          {label:'其他',key:"其他"},
      ],
      tabMapOptions3:[
          {label:'农、林、牧、渔业',key:"农、林、牧、渔业"},
          {label:'采矿业',key:"采矿业"},
          {label:'电力、燃气及水的生产和供应业',key:"电力、燃气及水的生产和供应业"},
          {label:'制造业',key:"制造业"},
          {label:'交通运输、仓储和邮政业',key:"交通运输、仓储和邮政业"},
          {label:'信息传输、计算机服务和软件业',key:"信息传输、计算机服务和软件业"},
          {label:'批发和零售业',key:"批发和零售业"},
          {label:'金融业',key:"金融业"},
          {label:'住宿和餐饮',key:"住宿和餐饮"},
          {label:'房地产业',key:"房地产业"},
          {label:'租赁和商务服务业',key:"租赁和商务服务业"},
          {label:'科学研究、技术服务和地质勘查业',key:"科学研究、技术服务和地质勘查业"},
          {label:'水利、环境和公共设施管理业',key:"水利、环境和公共设施管理业"},
          {label:'居民服务和其他服务业',key:"居民服务和其他服务业"},
          {label:'教育',key:"教育"},
          {label:'卫生、社会保障和社会福利业',key:"卫生、社会保障和社会福利业"},
          {label:'文化、体育和娱乐业',key:"文化、体育和娱乐业"},
          {label:'公共管理和社会组织',key:"公共管理和社会组织"},
          {label:'国际组织',key:"国际组织"},
          {label:'其他',key:"其他"},
      ],
      rules: {
        reqname:[
          { required: true, message: "用户名不能为空", trigger: "blur" }
          ],
        reqtype: [
          { required: true, message: "需要选择类型", trigger: "change" }
          ],
        reqfield: [
          { required: true, message: "请选择领域", trigger: "change" }
        ],
        reqindu: [
          { required: true, message: "请选择行业", trigger: "change" }
        ],
        reqkw:[
          { required: true, message: "请填写关键词", trigger: "blur" }
          ],
        reqbg:[
          { required: true, message: "背景不能为空", trigger: "blur" }
          ],
        reqpb: [
          { required: true, message: "待解问题不能为空", trigger: "blur" }
          ],
        reqtarg: [
          { required: true, message: "目标不能为空", trigger: "blur" }
        ],
        reqbelongs: [
          { required: true, message: "所属不能为空", trigger: "change" }
        ],
        reqown:[
          { required: true, message: "所属名称不能为空", trigger: "blur" }
          ],
        reqaddr: [
          { required: true, message: "地址不能为空", trigger: "blur" }
          ],
        reqperson: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        reqcontact: [
          { required: true, message: "联系方式不能为空", trigger: "blur" }
        ],
        reqmail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" }
        ],
        fileList: [
          { required: true, message: "附件不能为空", trigger: "blur" }
        ],
      },
      dialogFormVisible: false,
    };
  },
  methods: {
    toach(){
      this.$router.push({path:"/TechRequirements"})
    },
    handleRemove(file, fileList) {
        console.log(file,fileList);
      },
      handlePreview(file,fileList) {
        console.log(file);
      },
      handleBefore(file,fileList){
        this.fileList=fileList;
        console.log(file,fileList);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    handleCreate() {
      this.questionForm = {
        reqname:"",
        reqtype:"",
        reqfield:"",
        reqindu:"",
        reqcoin:"",
        reqbg: "",
        reqpb: "",
        reqtarg: "",
        reqbelongs: "",
        reqown: "",
        reqaddr: "",
        reqperson: "",
        reqcontact: "",
        reqmail: "",
        fileList:"",
      };
      this.dialogFormVisible = true;
    },
    toTR(){
      this.$router.push({path:"/TechRequirements"})
    },
    createData() {
       let params = {
        reqname: this.questionForm.reqname,
        reqtype: this.questionForm.reqtype,
        reqfield: this.questionForm.reqfield,
        reqindu: this.questionForm.reqindu,
        reqcoin: this.questionForm.reqcoin,
        reqbg: this.questionForm.reqbg,
        reqpb: this.questionForm.reqpb,
        reqtarg: this.questionForm.reqtarg,
        reqbelongs: this.questionForm.reqbelongs,
        reqown: this.questionForm.reqown,
        reqaddr: this.questionForm.reqaddr,
        reqperson: this.questionForm.reqperson,
        reqcontact: this.questionForm.reqcontact,
        reqmail: this.questionForm.reqmail,
        fileList: this.fileList,
        
      }
      console.log(params)

      this.api.postreq(params).then(res => {
        console.log(res);

      }).catch(err => {
        this.$message({
          type: "info",
          message: err
        })
      })
    },
  },
};
</script>
<style scoped>
.body{
    background-color: rgb(243, 245, 245);
  }
.top-line{
  padding-top:1% ;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 3px solid skyblue;
  width:900px;
  text-align: left;
}
.form-container {
    background-color: rgb(255, 255, 255);
    width: 600px;
    margin-top:2% ;
    padding-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
}
.filter-item{
  width: 100%;
}

</style>